<template>
  <div class="bg">
    <div class="wrap">
      <el-row :gutter="20">
        <el-col :span="7">
          <div class="grid-content">
            <Columnar />
          </div>
          <div class="grid-content">
            <Circlering />
          </div>
        </el-col>
        <el-col :span="9">
          <div class="grid-content">
            <Map />
          </div>
          <div class="grid-content"><Percent /></div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content"><Curve /></div>
          <div class="grid-content"><Bar /></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import Columnar from './components/Columnar.vue'
import Curve from './components/Curve.vue'
import Map from './components/Map.vue'
import Bar from './components/Bar.vue'
import Circlering from './components/Circlering.vue'
import Percent from './components/Percent.vue'
export default {
  name: 'ECharts1',
  components: { Columnar, Curve, Map, Bar, Circlering, Percent },
  data() {
    return {
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
  }
}
</script>
<style>
html{
    font-size: calc(100vw/200)
}
body{font-size: 100%;}
</style>
<style scoped>
.bg { font-family:"Microsoft YaHei"; font-size:2rem; color:#333; line-height:150%; background:#fff;}
.wrap {padding:3rem;width:100%;}
.grid-content {
    border-radius: 4px;
    border:1px solid #40afd5;
    width:100%;
    margin-top:1rem;
    height: 30rem;
  }
</style>

